<template>
	<div class="addMenu">
		<div class="form_box">
			<el-form :model="menuForm">
				<el-form-item label="菜单名称" label-width="120px">
					<el-input v-model="menuForm.title" />
				</el-form-item>
				<el-form-item label="上级菜单" label-width="120px">
					<el-select v-model="selectVal" placeholder="Select" size="large">
						<el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="前端名称" label-width="120px">
					<el-input v-model="menuForm.name" :disabled="editStatus" />
				</el-form-item>
				<el-form-item label="前端图标" label-width="120px">
					<el-input v-model="menuForm.icon" :disabled="editStatus" />
				</el-form-item>
				<el-form-item label="是否显示" label-width="120px">
					<el-radio-group v-model.number="menuForm.hidden" @change="changeFn">
						<el-radio label="0">是</el-radio>
						<el-radio label="1">否</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="排序" label-width="120px">
					<el-input v-model="menuForm.sort" />
				</el-form-item>
				<el-button type="primary" @click="handleSubmit(menuForm)" style="margin-left: 120px">提交</el-button>
			</el-form>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import type { updateStatusItem } from "@/types/global";
import type { Ref } from "vue";
import { useRoute } from "vue-router";
import * as menu from "@/request/modules/menu";
const route = useRoute();
// 判断是添加还是编辑的状态
const editStatus = ref(true);
// 表单数据
const menuForm = ref({}) as Ref<updateStatusItem>;
/* et id = ref(0) as Ref<number>;
id.value = route.query.id as unknown as number; */
// 请求相关数据
const details = async (menuId: number) => {
	let res = await menu.menuDetailAPI(menuId);
	menuForm.value = res;
};
if (!route.query.id) {
	editStatus.value = false;
} else {
	editStatus.value = true;
	console.log(route.query.id);
	details(Number(route.query.id));
	console.log(menuForm);
}

const selectVal = ref(0);
const selectList = reactive([
	{
		label: "无上级菜单",
		value: "",
	},
	{
		label: "权限",
		value: "97",
	},
	{
		label: "商品",
		value: "99",
	},
]);
// 是否显示
const changeFn = (e: any) => {
	menuForm.value.hidden = e;
};
// 提交按钮
const handleSubmit = async (from: updateStatusItem) => {
	await menu.menuCreateAPI(from);
};
</script>

<style lang="less" scoped>
.addMenu {
	padding: 20px 20px 10px;
	.form_box {
		padding: 20px;
		border-radius: 4px;
		box-shadow: 0 0 5px 3px #eee;
	}
}
</style>
